<template>
  <div>
    <NormalForm :btn-normal-rule.sync="btnNormalRule" :enumOpt="enumOpt" :formList="formList"
                :operateForm="queryForm" pageTitle="获客助手链接列表" @handleQuery="handleQuery"
                @handleReset="handleReset"></NormalForm>
    <div class="g-card" style="padding:10px 20px 10px">
      <div style="display:flex;justify-content: space-between;line-height: 50px;padding-bottom: 10px">
        <div style="line-height: 50px" v-has-permi="['admin:customerLink:balance']">
          <span>获客助手使用额度: {{ balance || 0 }}</span>
          <span style="margin-left: 16px">累计使用量：{{ historyTotal || 0 }}</span>
        </div>
        <div>
          <el-button v-hasPermi="['admin:customerLink:add']" icon="el-icon-plus" type="primary" @click="goRoute">创建链接
          </el-button>
        </div>
      </div>
      <el-table v-loading="loading" :data="tableList" height="442px" style="width: 100%">
        <el-table-column align="center" label="序号" type="index" width="55"/>
        <el-table-column align="center" label="链接名称" prop="linkName" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <span style="color: #082aff; cursor: pointer" @click="detailLink(row.linkId)">
              {{ row.linkName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column :min-width="180" align="center" label="使用员工" prop="weUserName"></el-table-column>
        <el-table-column align="center" label="创建时间" prop="createTime" show-overflow-tooltip>
        </el-table-column>
        <el-table-column align="center" label="创建人" prop="createBy" show-overflow-tooltip>
        </el-table-column>
        <el-table-column align="center" class-name="small-padding fixed-width" fixed="right" label="操作" width="250">
          <template slot-scope="{ row }">
            <div style="display: flex; justify-content: space-evenly">
              <el-button v-hasPermi="['admin:link:updateStates']" size="mini" type="text" @click="editLink(row.linkId)">
                编辑
              </el-button>
              <el-button :data-clipboard-text="row.customerLinkUrl" class="tag-copy" size="mini" type="text"
                         @click="handleCopy">复制链接
              </el-button>
              <el-button v-hasPermi="['admin:link:delete']" autofocus size="mini" type="text"
                         @click="deleteItem(row.linkId)">删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total"
                        @handleCurrentChange="handleCurrentChange"
                        @handleSizeChange="handleSizeChange"></NormalPagination>
    </div>
    <!-- 删除table数据 -->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="delTable" title="删除"
               width="400px">
      <span>确认删除该条数据吗？</span>
      <div slot="footer">
        <el-button plain type="info" @click="cancelDel">取 消</el-button>
        <el-button :loading="delLoding" type="primary" @click="deleteLink">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as api from "@/api/communityOperating/drainageLink";

export default {
  name: "linkAssistant",
  data() {
    return {
      queryForm: {
        linkName: "",
        createCodeList: [],
        pageNum: 1,
        pageSize: 20,
      },
      formList: [
        {
          label: '链接名称',
          value: '',
          prop: 'linkName',
          type: 'INPUT',
          emunName: ''
        },
        {
          label: '创建人',
          value: '',
          prop: 'createCodeList',
          type: 'STAFF',
          emunName: ''
        },
      ],
      enumOpt: {
        drainageList: []
      },
      drainageOpt: {},
      tableList: [],
      total: 0,
      delTable: false,
      linkId: "",
      loading: false,
      delLoding: false,
      prefixUrl: window.globalConfig.ONTINT_URL + "/scrm-api/link/open/", // 地址前缀
      btnNormalRule: ['admin:customerLink:list'],
      balance: 0,
      historyTotal: 0,
    };
  },
  created() {
    // 引流类型
    this.getDicts("drainage_type").then((res) => {
      if (res.code === 200) {
        this.enumOpt.drainageList = res.data;
        res.data.forEach(item => {
          this.drainageOpt[item.dictValue] = item.dictLabel
        });
      }
    });
  },
  mounted() {
    this.handleQuery();
    api.getLinkAssistantBalance().then(res => {
      this.balance = res.data?.balance || 0
      this.historyTotal = res.data?.total || 0
    })
  },
  methods: {
    // 重置
    handleReset() {
      this.queryForm = {
        linkName: "",
        createCodeList: '',
        pageNum: 1,
        pageSize: 20,
      };
      this.getListFn();
    },
    handleQuery() {
      this.queryForm.pageNum = 1;
      this.getListFn()
    },
    getListFn() {
      let obj = {
        hkOpenFlag: 1,
        linkName: this.queryForm.linkName,
        createCodeList: this.queryForm.createCodeList + '',
        pageNum: this.queryForm.pageNum,
        pageSize: this.queryForm.pageSize,
      };
      this.loading = true;
      this.tableList = []
      this.total = 0
      api.linkAssistantList(obj).then((res) => {
        if (res.code === 200) {
          this.tableList = res.rows || [];
          this.total = res.total || 0;
        }
        this.loading = false;
      }).catch(() => {
        this.loading = false
      })
    },
    // 翻页
    handleSizeChange(val) {
      this.queryForm.pageNum = 1
      this.queryForm.pageSize = val
      this.getListFn()
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum = val
      this.getListFn()
    },
    // 创建链接
    goRoute() {
      this.$router.push({
        name: "AddLinkAssistant",
        query: {
          operateFlag: 'ADD'
        }
      });
    },
    // 详情
    detailLink(id) {
      this.$router.push({
        name: "DetailLinkAssistant",
        query: {
          linkId: id,
          operateFlag: 'DETAIL'
        },
      });
    },
    // 编辑
    editLink(id) {
      this.$router.push({
        name: "EditLinkAssistant",
        query: {
          linkId: id,
          operateFlag: 'EDIT'
        },
      });
    },
    // 复制链接
    handleCopy() {
      let clipboard = new this.clipboard(".tag-copy");
      clipboard.on("success", (e) => {
        this.$message({
          message: "复制链接成功!",
          type: "success",
          duration: 2000,
        });
        //清除选中
        e.clearSelection();
        //释放内存，以防重复复制
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        this.$message({
          message: "复制链接失败!",
          type: "error",
          duration: 2000,
        });
        //清除选中
        e.clearSelection();
        //释放内存，以防重复复制
        clipboard.destroy();
      });
    },
    // 删除
    deleteItem(id) {
      this.delTable = true;
      this.linkId = id;
    },
    deleteLink() {
      this.delLoding = true;
      api.deleteLinkAssistant({id: this.linkId}).then((res) => {
        if (res.code === 200) {
          this.cancelDel();
          this.handleQuery();
          this.$message.success("删除成功！");
        } else {
          this.$message.error("删除失败！");
        }
        this.delLoding = false;
      });
    },
    // 取消删除
    cancelDel() {
      this.delTable = false;
      this.linkId = "";
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/base.scss";

::v-deep .el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
  border-bottom: none !important;
}

::v-deep .el-table .el-table__header-wrapper th {
  background-color: #f8f8f9 !important;
}

::v-deep .el-popconfirm .el-popconfirm__action .el-button .el-button--primary {
  font-size: 12px !important;
}
</style>
